<html>
<head>
    <title>Welcome to Grails Maps</title>
    <link rel="stylesheet" href="css\style.css" type="text/css">

    <script type="text/javascript" src="js/jquery-1.4.1.js"></script>


     <script type="text/javascript">
        jQuery(document).ready(function() {

           (function($){
            $.ajax({
                url:"state/list?format=json",
                cache: false,
                dataType:"text",
                success: function(data) {
                    alert(data);
                }
             }
           );

           })(jQuery);

        });
    </script>
   <script type="text/javascript"
            src="http://www.google.com/jsapi?key=ABQIAAAAiVvLfVjjB1KmQhUm1SwcpBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQQKUpurwoNEcA7_Vi5pMFL-IGerw"></script>

    <script type="text/javascript">
        google.load("maps", "2.x");

        function initialize() {
            var map = new google.maps.Map2(document.getElementById("map"));
            map.setCenter(new GLatLng(40.00, -91.00), 3);
            map.setUIToDefault();
        }
        google.setOnLoadCallback(initialize);
    </script>

<body>
<div id="body-wrapper">
    <div id="header">
        <span>Grails Maps</span>
        <span><a href="">Home</a></span>
    </div>
    <div id="state-wrapper">
        <h2>States</h2>

        <div id="state-list"></div>
    </div>
    <div id="main-content">

        <h1>Welcome to Sarasota Tech Fest - Map Demo</h1>

        <p>Select a state to view cities and maps</p>

        <div>
            <form action="state/search">
                <label>Search</label><span><input type="text" name="searchText" value=""/></span>
                <input type="submit" value="Search"/>
            </form>
        </div>
        <div id="map-wrapper">
            <div id="map">
            </div>
        </div>

    </div>
</div>
</body>
</html>